<template>
	<view class="home">
		<uni-nav-bar shadow left-icon="left" title="公众号模板内容填写" @clickLeft="back" />
		<view class="form_box">
			<!-- 			<uni-section title="公众号模板定义参数" type="line">
				<uni-forms ref="form" :model="templateData" label-width="90px" label-align="right">
					<uni-forms-item label="邮政编码" required name="riqi" :rules="[{
						required: true,
						errorMessage: '邮政编码不能为空'
					}]">
						<uni-easyinput type="number" v-model="templateData.district"
							placeholder="输入邮政编码获取当地天气" />
					</uni-forms-item>
				</uni-forms>
			</uni-section> -->
			<uni-section title="自定义参数" sub-title="天气只能精确至 区 县" subTitleFontSize="14px" subTitleColor="#ff0000"
				type="line">
				<template v-slot:right>
					<view class="section_btn">
						<button size="mini" type="default" @click="openDemoPopup('bottom')">当前模板样式</button>
					</view>
				</template>
				<view class="example">
					<!-- 基础表单校验 -->
					<uni-forms ref="form" :model="templateData" label-width="105px" label-align="right">
						<uni-forms-item label="行政区划编码" required name="district" :rules="[{
							required: true,
							errorMessage: '地址码不能为空，即当地身份证前六位'
						},{
							minLength: 6,
							maxLength: 6,
							errorMessage: '请输入正确的区县地址码(身份证前六位)',
						}]">
							<uni-easyinput type="number" v-model="templateData.district"
								placeholder="输入区县行政区划编码换取天气信息" />
						</uni-forms-item>
						<!-- 						<uni-forms-item label="彩虹屁" required name="caihongpi" :rules="[{
							required: true,
							errorMessage: '彩虹屁不能为空'
						}]">
							<uni-easyinput v-model="templateData.caihongpi" placeholder="请输入彩虹屁" />
						</uni-forms-item> -->
						<uni-forms-item label="恋爱纪念日" required name="lianaitime" :rules="[{
							required: true,
							errorMessage: '恋爱纪念日不能为空'
						}]">
							<uni-datetime-picker type="date" :value="templateData.lianaitime" :end="startTime"
								@change="changeTime($event,1)" placeholder="请输入恋爱纪念日" />
						</uni-forms-item>
						<uni-forms-item label="生日" required name="birthday" :rules="[{
							required: true,
							errorMessage: '生日不能为空'
						}]">
							<uni-datetime-picker type="date" :value="templateData.birthday" :end="startTime"
								@change="changeTime($event,2)" placeholder="请输入生日" />
							<!-- <uni-easyinput v-model="valiFormData.templateData.birthday" placeholder="请输入生日" /> -->
						</uni-forms-item>
						<!-- 			<uni-forms-item label="金句" required name="jinju" :rules="[{
							required: true,
							errorMessage: '金句不能为空'
						}]">
							<uni-easyinput v-model="templateData.jinju" placeholder="请输入金句" />
						</uni-forms-item> -->
						<uni-forms-item label="备注" required name="remark" :rules="[{
							required: true,
							errorMessage: '备注不能为空'
						}]">
							<uni-easyinput v-model="templateData.remark" placeholder="请输入备注" />
						</uni-forms-item>
					</uni-forms>
					<button type="primary" @click="submit()">下一步</button>
				</view>
			</uni-section>
		</view>
		<view style="height: 100%;">
			<!-- 定时器弹窗 -->
			<uni-popup ref="timerPopup" background-color="#fff" @change="changePop">
				<view class="popup-content popup-height">
					<uni-title type="h1" align="center" title="设置推送时间"></uni-title>
					<view class="pop_body">
						<view class="line">
							<label class="label" for="uni-datetime-picker"><text
									class="mast">早上(06:00-10:30)</text></label>
							<picker mode="time" :value="cronMoring" start="06:00" end="10:30"
								@change="changeLog($event,1)">
								<view class="uni-input">
									{{cronMoring}}
								</view>
							</picker>
							<uni-icons v-if="cronMoring.length === 5" style="margin-left: .3rem;" type="checkmarkempty">
							</uni-icons>
						</view>
						<view class="line">
							<label class="label" for="uni-datetime-picker"><text
									class="mast">晚上(17:00-23:59)</text></label>
							<picker mode="time" :value="cronNight" @change="changeLog($event,2)" start="17:00"
								end="23:59">
								<view class="uni-input">
									{{cronNight}}
								</view>
							</picker>
							<uni-icons v-if="cronNight.length === 5" style="margin-left: .3rem;" type="checkmarkempty">
							</uni-icons>
						</view>
						<view v-if="isTips" class="tips">
							生效时间不符合格式（例：00:00）
						</view>
					</view>
					<button type="primary" border @click="build">生成配置</button>
				</view>
			</uni-popup>
			<!-- 模板预览弹窗 -->
			<uni-popup ref="demoPopup" background-color="#fff" @change="changePop">
				<view class="popup-content">
					<uni-title type="h1" align="center" title="当前模板样式"></uni-title>
					<image class="demo_img" src="/static/img/demo.jpg" mode="aspectFit"></image>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import {
		setHasData
	} from '@/api/wxpush/index.js'
	import {
		getDate,
		getTime,
		formatCorn,
	} from '@/util/common.js'
	import {
		setTimer
	} from '@/api/job/index.js'
	export default {
		data() {
			return {
				searchVal: '',
				loading: false,
				isPop: false,
				itemData: '',
				popType: '',
				result: '',
				// 校验表单数据
				templateData: {
					appid: '',
					secret: '',
					openid: '',
					morningTemplateId: '',
					district: '',
					lianaitime: '',
					birthday: '',
					remark: '',
					beizhu: 'beizhu',
					shengri: 'shengri',
					jinju: 'jinju',
					caihongpi: 'caihongpi',
					lianai: 'lianai',
					tianqi: 'tianqi',
					riqi: 'riqi',
					low: 'low',
					high: 'high',
				},
				userInfo: '',
				code: '',
				single: '',
				startTime: '',
				endTime: '',
				cronMoring: '06:00',
				cronNight: '17:00',
				isUpload: false,
				isTips: false
			}
		},
		onLoad(option) {
			if (option.userInfo) {
				this.userInfo = JSON.parse(option.userInfo)
			} else {
				this.userInfo = uni.getStorageSync('userInfo')
			}
			this.startTime = getDate()
			this.endTime = getDate()
			// this.cronMoring = getTime()
			// this.cronNight = getTime()

		},
		onShow() {
			this.templateData.appid = getApp().globalData.APP_ID
			this.templateData.secret = getApp().globalData.SECRET
			this.templateData.morningTemplateId = getApp().globalData.MORNING_TEMPLATE_ID
			this.templateData.openid = this.userInfo.openid
			console.log(this.templateData)
			// this.templateData.openid = 'oIrTY6Qzf2d_0ocTJkURActR0TxU'
		},
		methods: {
			back() {
				let pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}
			},
			// 	确认提交
			submit() {
				let that = this;
				// 判断是否已经提交
				if (that.isUpload) {
					return that.toggle('bottom')
				}
				uni.showLoading({
					title: '正在提交...'
				})

				that.$refs.form.validate().then(res => {
					uni.hideLoading()
					uni.showLoading({
						title: '配置生成中...'
					})
					setHasData(that.templateData).then(res => {
						if (res.code === 200) {
							that.isUpload = true
							that.toggle('bottom')
						}
						uni.hideLoading()
					}).catch(() => {
						uni.hideLoading()
					})
				}).catch(err => {
					console.log('err', err);
					uni.hideLoading()
				})
			},
			// 弹出层change事件，关闭或打开
			changePop(e) {
				// console.log('当前模式：' + e.type + ',状态：' + e.show);

			},
			// 打开或关闭弹出层
			toggle(type) {
				this.$refs.timerPopup.open(type)
			},
			openDemoPopup(type){
				this.$refs.demoPopup.open(type)
			},
			// 选择日期事件
			changeTime(e, type) {
				if (type === 1) {
					this.templateData.lianaitime = e;
				} else {
					this.templateData.birthday = e;
				}
			},
			// 选择日式时间事件
			changeLog(e, type) {
				type === 1 ? this.cronMoring = e.detail.value : this.cronNight = e.detail.value
				this.isTips = false
			},
			// 生成配置
			build() {
				let that = this
				uni.showLoading({
					title: '正在提交...'
				})
				let params = {
					cronMoring: formatCorn(that.cronMoring),
					cronNight: formatCorn(that.cronNight),
					openid: that.userInfo.openid,
					// openid: 'oIrTY6Qzf2d_0ocTJkURActR0TxU'
				}
				setTimer(params).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.showToast({
							title: '设置成功',
							icon: 'success',
							duration: 2000,
							success() {
								// uni.reLaunch({
								// 	url: '/pages/success/success?setData=' + JSON.stringify(that.templateData) + '&=cronMoring' + params.cronMoring + '&=cronNight'+params.cronNight
								// })
								// setTimeout(() => {
								// 	// uni.reLaunch({
								// 	// 	url: '/pages/index/index'
								// 	// })
								// 	uni.navigateBack()
								// }, 2000)
								setTimeout(() => {
									// this.getTemplate()
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							}
						})
					} else {
						uni.showToast({
							title: '设置失败',
							icon: 'error',
							duration: 2000,
						})
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},

			// openMap(){
			// 	let that = this;
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success: function (res) {
			// 			console.log('当前位置的经度：' + res.longitude);
			// 			console.log('当前位置的纬度：' + res.latitude);
			// 			that.valiFormData.templateData.district = res
			// 		}
			// 	});

			// uni.chooseLocation({
			// 	success: function (res) {
			// 		that.valiFormData.templateData.district = res
			// 	}
			// });


			// }
		}
	}
</script>

<style lang="scss">
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */
	.popup-content {
		@include flex;
		width: 100%;
		flex-direction: column;
		background-color: #fff;
	}
	page {
		background-color: #fff;
	}

	.example {
		padding: 1rem;
	}

	.pop_body {
		padding-bottom: 3rem;
	}

	.line {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 1rem;
	}

	.line .label {
		// width: 150px;
		margin-right: 1rem;
	}

	.uni-input {
		width: 6rem;
		border: .05rem solid #b5b5b5;
		padding: .3rem 1rem;
		border-radius: 1rem;
		transition: .5s all;
		text-align: center;
	}

	// .uni-date-x--border{

	// }
	.err_border {
		border: 1px solid red;
	}

	.tips {
		color: red;
		font-size: .6rem;
		text-align: center;
	}

	/* 必填*好 */
	.mast {
		// color: red;
		font-size: 1rem;
	}

	.success_state {
		border: .05rem solid #55ff7f;
		background-image: linear-gradient(to right, red);
	}
	.demo_img{
		width: 100vw;
	}
	.section_btn uni-button{
		background-color: $uni-primary-disable;
		color: $uni-white;
		// box-shadow: $uni-shadow-lg;
	}
	.section_btn uni-button:after{
		border: none;
	}
</style>
